<template>
  <div>
    <div>child1 - {{ count2 }} - {{ name }} - {{ age }} - {{ likes }}</div>
    <ul>
      <li v-for="item in oddNums" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {
      price: 1299,
      num: 3,
    };
  },
  // computed: {
  //   doubleNum() {
  //     return this.num * 2
  //   }
  //   count2() {
  //     return this.$store.state.count;
  //   },
  //   name() {
  //     return this.$store.state.name;
  //   },
  //   age() {
  //     return this.$store.state.age;
  //   },
  //   likes() {
  //     return this.$store.state.likes;
  //   },
  // },

  // mapState是将仓库的state映射到了组件的计算属性里面
  // computed: mapState(["count", "name", "age", "likes"]),

  // computed: mapState({
  //   count2: "count",
  //   name: "name",
  //   age: (state) => state.age + 10,
  //   // likes: (state) => [...state.likes, this.price],
  //   // 如果这个函数要用到this，需要改成普通函数，不然this指向有问题
  //   likes(state) {
  //     return [...state.likes, this.price];
  //   },
  // }),

  // computed: {
  //   doubleNum: function() {
  //     return this.num * 2;
  //   },
  // },

  computed: {
    ...mapState({
      // nums: "nums",
      count2: "count",
      name: "name",
      age: (state) => state.age + 10,
      // likes: (state) => [...state.likes, this.price],
      // 如果这个函数要用到this，需要改成普通函数，不然this指向有问题
      likes(state) {
        return [...state.likes, this.price];
      },
    }),
    ...mapGetters(["oddNums"]),
    doubleNum() {
      return this.num * 2;
    },
    // oddNums() {
    //   return this.nums.filter((item) => item % 2);
    // },
    // oddNums() {
    //   return this.$store.getters.oddNums(0);
    // },
    // oddNums() {
    //   return this.$store.getters.oddNums;
    // },
  },
};
</script>

<style lang="less" scoped></style>
